/*
 * @Description:
 * @Author: cdtangxiejun
 * @version:
 * @Date: 2024-06-24 17:22:23
 * @LastEditors: cdtangxiejun
 * @LastEditTime: 2024-08-21 10:38:27
 */
/**
 * 轮播图组件
 */
import React from 'react'
import Taro from '@tarojs/taro'
import { View, Swiper, SwiperItem } from '@tarojs/components'
import { moduleUtil, requestServer } from '@conecli/cone-render/api'
import {
	LazyLoadImage,
	ItemViewExposureSmart,
	CustomScrollView,
} from '@conecli/cone-render/components'
import bannerStyle from './index.module.scss'

const { windowWidth } = Taro.getSystemInfoSync()
const pxTransformFromData = (
	num,
	widthSize = 375,
	layoutWidth = windowWidth,
) => {
	const getNum = Number(num)
	return Math.round((getNum / widthSize) * layoutWidth)
}
const Banner = props => {
	const { floorData, layoutLeftRightMargin, containerBorderRadius } = props
	const banner = moduleUtil.getDataDefine(floorData, 'bannerData')
	const picList = banner?.data || []

	const layoutWidth = windowWidth - layoutLeftRightMargin
	const changeHeight = pxTransformFromData(
		picList[0]?.h,
		picList[0]?.w,
		layoutWidth,
	)

	const swiperHeightStyle = {
		height: `${changeHeight}px`,
	}
	const swiperBorderRadiusStyle = containerBorderRadius
		? {
				borderRadius: `${containerBorderRadius}px`,
		  }
		: {}

	/**
	 * 组合埋点信息，如果链接小工具配置的是跳转商详，需要上报skuid
	 * @param item
	 * @param index
	 */
	const createReportMinfo = (item, index) => {
		const { configDataValue, configDataType } = item
		const getRes: any = {
			jumpUrl: encodeURIComponent(configDataValue?.clickUrl || ''),
			pos: index,
		}
		configDataType === 1 && (getRes.skuid = configDataValue?.skuIds)
		return getRes
	}

	return (
		<View className={bannerStyle['d-banner']} style={swiperHeightStyle}>
			<CustomScrollView scrollX>
				<Swiper
					className={bannerStyle['list']}
					circular
					indicatorDots={picList && picList.length > 1}
					indicatorActiveColor="#fa2c19"
					autoplay={picList && picList.length > 1}
					style={swiperHeightStyle}
				>
					{picList &&
						picList.length > 0 &&
						picList.map((item, index) => {
							return (
								<SwiperItem
									key={index}
									className={bannerStyle['d-item']}
									style={swiperBorderRadiusStyle}
								>
									<ItemViewExposureSmart
										className={bannerStyle['d-img-wrap']}
										style={swiperBorderRadiusStyle}
										reportData={[
											floorData,
											createReportMinfo(item?.detail, index),
											{},
										]}
									>
										<LazyLoadImage
											className={bannerStyle['d-img']}
											src={item?.imageUrl}
											lazyLoad={false}
										/>
									</ItemViewExposureSmart>
								</SwiperItem>
							)
						})}
				</Swiper>
			</CustomScrollView>
		</View>
	)
}

export default Banner
